<template>
  <div class="chat-container" id="scrollMsg">
    <div class="PrDetail">
      <!-- 加载重连中 -->
      <!-- <div class="Group_error" v-else-if="isLoading">
        <el-alert title="网络重连中" type="error" center :closable="false">
        </el-alert>
      </div> -->
      <!-- 警告框 -->
      <div class="Group_error" v-if="isNetwork">
        <el-alert
          title="当前网络不可用"
          type="error"
          center
          :closable="false"
        >
        </el-alert>
        <!-- <button>网络设置</button> -->
      </div>
    </div>
  
    <div class="chat-container-scroll" ref="myScroll">
      <!-- 对话框 -->
      <div v-for="(message, index) in chatMessages || []" :key="index"  :class="message.createBy == userId ? 'self chat-scroll__item' : 'chat-scroll__item'" >
        <!-- 对方头像 -->
        <div class="chat-scroll__item__avatar_friend">
          <img :src="getAvatar(message) || DeAvatar"/>
        </div>
        <!-- 当前用户头像 -->
        <!-- 当前发送的消息 -->
        <div class="sender" @click.stop>
          <!--  发送人姓名-->
          <div class="chat-scroll__item_name">
            <!-- 发送时间 -->
            <span class="timeRead">
              <!-- {{ (message.createTime | formatDate).replace(/-/g, "/") }} -->
              {{ message.createTime.replace(/-/g, "/") }}
            </span>
            <span style="display: inline-block">{{message.createBy == userId ? userInfo.nickName : getName(message)}}</span>
          </div>
          <!-- 发送姓名 end -->
          <div class="sender-message">
            <div v-if="message.createBy == userId">
              <!-- 全部已读 -->
              <i
                class="el-icon-circle-check"
                style="margin-bottom: 10px; margin-right: 10px"
                v-if="sumReads(message) == 100"
                @click="ReadUn(message, index, $event)"
              >
              </i>
              <!-- 百分比记录已读未读 -->
              <i
                style="margin-right: 10px"
                v-else
                @click="ReadUn(message, index, $event)"
              >
                <el-progress
                  type="circle"
                  :width="12"
                  :percentage="sumReads(message)"
                  :stroke-width="5"
                  color="#06B49C"
                  slot="reference"
                >
                </el-progress>
              </i>
            </div>
            <!-- 发送的内容 -->
            <div
              class="chat-scroll__item__message"
              id="sender-message"
              @contextmenu.prevent="rightClickFn($event)"
            >
              <div class="item-box" v-if="message.status == -1">
                <span
                  style="line-height: 180%"
                >
                消息已撤回
                </span>
              </div>
              <!-- 语音 -->
              <div class="item-box" v-else-if="message.type == 8">
                <div class="record_voice" @click="playVoice(message)">
                	<div class="voice_file" :style="{'width': getVoiceWidth(message)}">
                		{{message.voiceDuration}}
                		<img src="@/assets/images/audio_gif.gif" v-if="innerAudioIcon == message.id" />
                		<img src="@/assets/images/audio.png" v-else />
                	</div>
                	<div class="voice_inter" v-show="message.voiceShow">
                		<span v-for="(it,i) in message.voiceScript" :key="i">{{ it }}</span>
                	</div>
  
                </div>
              </div>
              <!-- 语音 end -->
              <div class="item-box" v-else-if="getSuffixFile(message)">
                <!-- 文件 -->
                <a
                  :download="getFileName(message.msg)"
                  :href="message.msg"
                  class="uploadF"
                  id="msgFile"
                  >
                  <img
                    src="@/assets/images/wj_icons.svg"
                    style="vertical-align: middle"
                    alt=""
                    v-if="
                      message.msg.endsWith('.pdf') ||
                      message.msg.endsWith('.docx') ||
                      message.msg.endsWith('.ppt') ||
                      message.msg.endsWith('.doc') ||
                      message.msg.endsWith('.pptx') ||
                      message.msg.endsWith('.PDF') ||
                      message.msg.endsWith('.xlsx') ||
                      message.msg.endsWith('.xls') ||
                      message.msg.endsWith('.txt') ||
                      message.msg.endsWith('.key') ||
                      message.msg.endsWith('.numbers') ||
                      message.msg.endsWith('.word')
                    "
                  />
                  <!-- 文件夹 -->
                  <img
                    src="@/assets/images/wjj_icon.svg"
                    alt=""
                    v-else
                    style="vertical-align: middle"
                  />
                  <span style="margin-left: 10px; margin-bottom: 5px">{{
                    getFileName(message.msg)
                  }}</span>
                </a>
              </div>
              <!--  图片 -->
              <div
                class="demo-image__preview"
                id="msgImage"
                v-else-if="getSuffix(message)"
                >
                <el-image
                  style="width: 100px; cursor: pointer"
                  :src="message.msg + '?x-oss-process=image/resize,m_fill,w_30,h_200,quality,q_60'"
                  :preview-src-list="getuploadImgs(message)"
                  :fit="fit"
                  lazy
                  @click="clickImage"
                >
                </el-image>
              </div>
  
              <!-- 文字 -->
              <div class="item-box" v-else>
                <span
                  style="line-height: 180%"
                  ref="textContent"
                  id="link"
  
                  v-html="highlight(message)"
                >
                </span>
              </div>
            </div>
            <!-- 鼠标右击事件 -->
            <!-- <div
              class="mouse"
              v-if="showMouse"
              :style="{ left: left + 'px', top: top + 'px' }"
            >
              <ul>
                 <li
                  @click="TurnText"
                  v-if="matchType(message.msg) == '语音'"
                >
                  转文字
                </li> -->
            <!-- <li @click="copy">复制</li> -->
            <!-- <li @click="answer" v-if="message.createBy != userId">
                  回复
                </li> -->
            <!-- <li
                  @click="download"
                  v-if="matchType(message.msg) == '图片'"
                >
                  下载
                </li> -->
            <!-- <li
                  @click="chenHUI(message.id)"
                  v-if="message.createBy == userId"
                >
                  撤回
                </li> -->
            <!-- <li @click="delMsg">删除</li> -->
            <!-- </ul>
            </div>  -->
            <!-- 已读未读详情框 -->
            <div
              class="reader"
              v-if="showHaveRead && showHaveReadIndex == index"
              :style="{ left: left + 'px', top: top + 'px' }"
            >
              <div class="read">
                <p>
                  <span>{{ readPerson.length }}</span> 已读
                </p>
                <ul>
                  <li
                    v-for="(memberItem, memberIndex) in readPerson"
                    :key="memberIndex"
                  >
                    <el-avatar :size="28"
                      ><img
                        :src="
                          memberItem.avatar == ''
                            ? DeAvatar
                            : memberItem.avatar
                        "
                        alt="" /></el-avatar
                    ><span>{{ memberItem.nickName }}</span>
                  </li>
                </ul>
              </div>
              <div class="unread">
                <p>
                  <span>{{ unReadPerson.length }}</span> 未读
                </p>
                <ul>
                  <li
                    v-for="(memberItem, memberIndex) in unReadPerson"
                    :key="memberIndex"
                  >
                    <el-avatar :size="28"
                      ><img
                        :src="
                          memberItem.avatar == ''
                            ? DeAvatar
                            : memberItem.avatar
                        "
                        alt="" /></el-avatar
                    ><span>{{ memberItem.nickName }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//是否有网
var timerIn;
var timerCl;
var isconnected = false;

// var isNetwork = false;
import {
  getCarouselListApi,
  getDocRecommendApi,
  getLawGetInfoApi,
  getQaGetInfoApi,
  getTopGetInfoApi,
  getScontractGetInfoApi,
} from "@/BMViews/api/work/carousel.js";
import {
  uploadEmployees,
  getList,
  getDetaile,
  getName,
  getImMsgList,
  imUploadFile,
} from "@/BMViews/api/upload/index.js";


import { mapGetters } from "vuex";
import { async } from "q";
export default {
  components: {
    
  },
  props:{
    //当前聊天室信息
    imRoomInfo:{
      type: Object,
      default: ()=>{ return },
    },
  },
  data() {
    return {
      isNetwork: false, //是否有网
      isLoading: false, //是否重连加载中
      
    };
  },
  watch: {
    //监听聊天室信息变化
    imRoomInfo:{
      deep: !0,
      immediate: true,
      handler: async function (newValue, oldValue) {
        console.log('聊天记录组件获取聊天室信息',newValue)
        
      }
    }
  },
  filters: {
    
  },
  computed: {
    ...mapGetters(["token", "avatar", "userId", "userType", "userInfo","chatUserList"]),
  },
  created() {
    
  },
  beforeMount() {
    
  },
  mounted() {
    
  },
  updated() {
    //每次页面渲染完之后滚动条在最底部
    // this.chatScroll();
  },

  // 销毁事件
  beforeDestroy() {
    
  },
  methods: {
    
  },

};
</script>

<style>
</style>